<script setup lang="ts">
import { ref } from "vue";
import { setStore, getStore, checkUpdate, updater, download } from "../preload";
import IndexApi from "../api/index";
import bytes from "bytes";
const openAtLogin: any = ref("");
const resolvers: any = ref({});
const resolverObj: any = ref({
    text: [],
    doc: [],
    docx: [],
    pptx: [],
    odt: [],
    pdf: [],
    rtf: [],
    pages: [],
    html: [],
    xml: [],
});
const theme: any = ref("");
getStore("").then((config: any) => {
    openAtLogin.value = config.openAtLogin;
    resolvers.value = config.resolvers;
    parseResolver();
    theme.value = config.theme;
});
const parseResolver = () => {
    for (let i in resolvers.value) {
        if (resolverObj.value[resolvers.value[i]]) {
            resolverObj.value[resolvers.value[i]].push(i);
        }
    }
};
const changeOpenAtLogin = (value: boolean) => {
    setStore("openAtLogin", value);
};
const changeTheme = (value: string) => {
    setStore("theme", value);
};
const activeName = ref("base");
const resolverRemove = (value: string) => {
    delete resolvers.value[value];
    setStore("resolvers", JSON.parse(JSON.stringify(resolvers.value)));
};
const resolverAdd = (key: string, value: string) => {
    resolvers.value[key] = value;
    setStore("resolvers", JSON.parse(JSON.stringify(resolvers.value)));
};
const preventFormSubmit = (event: any) => {
    event.preventDefault();
};
const stats: any = ref([]);
const loadStat = () => {
    IndexApi.stat().then((res: any) => {
        let items: any = res.data || [];
        for (let i = 0; i < items.length; i++) {
            items[i].size = bytes(Number(items[i].size));
        }
        stats.value = items;
    });
};
const loading = ref(false);
loadStat();
const onRemove = () => {
    loading.value = true;
    IndexApi.remove({ index: actives.value })
        .then(() => {
            loadStat();
            actives.value = [];
            activeAll.value = false;
        })
        .finally(() => {
            loading.value = false;
        });
};
const actives: any = ref([]);
const activeAll = ref(false);
const onUpdate = () => {
    loading.value = true;
    IndexApi.update({ index: actives.value })
        .then(() => {
            loadStat();
            actives.value = [];
            activeAll.value = false;
        })
        .finally(() => {
            loading.value = false;
        });
};
const changeActiveAll = (value: boolean) => {
    if (!value) {
        actives.value = [];
    } else {
        let items: any = [];
        for (let i = 0; i < stats.value.length; i++) {
            items.push(stats.value[i].name);
        }
        actives.value = items;
    }
};
const clickStatItem = (value: number) => {
    stats.value[value].active = !stats.value[value].active;
    changeStatActive();
};
const changeStatActive = () => {
    let items: any = [];
    for (let i = 0; i < stats.value.length; i++) {
        if (stats.value[i].active) {
            items.push(stats.value[i].name);
        }
    }
    actives.value = items;
    activeAll.value = actives.value.length === stats.value.length;
};
const versionInfo: any = ref({});
const checkVersionLoading = ref(false);
const onCheckUpdate = () => {
    checkVersionLoading.value = true;
    checkUpdate()
        .then((res: any) => {
            versionInfo.value = res;
        })
        .finally(() => {
            checkVersionLoading.value = false;
        });
};
onCheckUpdate();
const downloadInfo: any = ref({});
const onDownload = () => {
    download(versionInfo.value.latest_version);
    window.ipcRenderer.on("updater", (_: any, res: any) => {
        downloadInfo.value = res;
        if (downloadInfo.value.type == "complete") {
            updater(versionInfo.value.latest_version);
        }
    });
};
</script>
<template>
    <div class="w-screen h-screen">
        <el-tabs class="w-full h-full" v-model="activeName" tab-position="left">
            <el-tab-pane label="基础" name="base">
                <el-form label-position="top" class="setting-form">
                    <el-form-item label="主题">
                        <el-radio-group v-model="theme" @change="changeTheme" size="small">
                            <el-radio-button value="light">Light</el-radio-button>
                            <el-radio-button value="dark">Dark</el-radio-button>
                            <el-radio-button value="system">System</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="启动">
                        <el-checkbox v-model="openAtLogin" @change="changeOpenAtLogin" label="开机时自动启动" />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="索引" name="index">
                <el-scrollbar class="w-full h-full">
                    <div class="flex items-center mb-2 pr-3">
                        <el-checkbox label="全选" v-model="activeAll" :disabled="loading" @change="changeActiveAll"></el-checkbox>
                        <div class="flex-1"></div>
                        <el-button @click="onRemove()" :disabled="loading || actives.length === 0" plain size="small">删除</el-button>
                        <el-button @click="onUpdate()" :disabled="loading || actives.length === 0" plain size="small">更新</el-button>
                    </div>
                    <div class="grid grid-cols-3 gap-2 pr-3">
                        <div v-for="(item,index) in stats" :key="index">
                            <div class="absolute ml-2">
                                <el-checkbox v-model="item.active" :disabled="loading" @change="changeStatActive"></el-checkbox>
                            </div>
                            <el-card class="card-p-0" shadow="never" @click="clickStatItem(index)">
                                <div class="text-center font-bold mt-7 px-2 truncate">{{ item.name }}</div>
                                <div class="flex items-center my-5 text-center px-1 font-mono">
                                    <div class="flex-1">{{ item.count }}</div>
                                    <div class="flex-1">{{ item.size }}</div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="解析器" name="resolvers">
                <el-scrollbar class="w-full h-full">
                    <el-form label-position="top" class="setting-form" @keyup.enter.native="preventFormSubmit">
                        <el-form-item v-for="(items, index) in resolverObj" :key="index" :label="index">
                            <tag-group :items="items" :resolver="index" @remove="resolverRemove" @add="resolverAdd"></tag-group>
                        </el-form-item>
                    </el-form>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="关于" name="about">
                <div class="w-full h-full">
                    <el-form class="setting-form" label-width="5rem">
                        <el-form-item label="当前版本">
                            <div class="text-sm w-20">{{ versionInfo.version }}</div>
                            <el-button size="small" class="w-20" :loading="checkVersionLoading" plain @click="onCheckUpdate">检查更新</el-button>
                        </el-form-item>
                        <el-form-item v-if="versionInfo.latest_version" label="新版本">
                            <div v-if="downloadInfo.type === 'download'">
                                下载中... {{ downloadInfo.percent }}%
                            </div>
                            <div v-else-if="downloadInfo.type === 'complete'">
                                下载完成，开始解压...
                            </div>
                            <div v-else-if="downloadInfo.type === 'error'">
                                更新失败: {{ downloadInfo.message }}
                            </div>
                            <div v-else class="flex items-center">
                                <div class="text-sm w-20">{{ versionInfo.latest_version }}</div>
                                <el-button size="small" class="w-20" plain @click="onDownload">
                                    下载更新
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style scoped>
</style>
